<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


</head>
<body>
<div id="app">

    <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
        <el-menu-item index="1"><a href="http://localhost:8080/vue-demo/showAllGoods.html">所有商品</a></el-menu-item>
        <el-submenu index="2">
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1"><a href="http://localhost:8080/vue-demo/usersMai.html" >修改个人信息</a></el-menu-item>
            <el-menu-item index="2-2"><a href="http://localhost:8080/vue-demo/showUserGoods.html" >管理商品</a></el-menu-item>
            <el-menu-item index="2-3">与客户聊天</el-menu-item>
            <el-menu-item index="2-4"><a href="http://localhost:8080/vue-demo/showCancelOrder.html" >我的商品售后</a></el-menu-item>
            <el-menu-item index="2-5"><a href="https://www.ele.me">管理收到的订单</a></el-menu-item>

        </el-submenu>
        <el-menu-item index="3" ><a href="http://localhost:8080/vue-demo/manageAddress.html" target="_blank">管理地址</a></el-menu-item>
        <el-menu-item index="4"><a href="http://localhost:8080/vue-demo/showMyGouwucar.html" target="_blank">我的购物车</a></el-menu-item>
        <el-menu-item index="5"><a href="http://localhost:8080/vue-demo/addPrice.html" target="_blank">积分充值</a></el-menu-item>
        <el-submenu index="6">
            <template slot="title">支付订单管理</template>
            <el-menu-item index="6-1"><a href="http://localhost:8080/vue-demo/showAllOrderForm.html" >所有订单</a></el-menu-item>
            <el-menu-item index="6-2"><a href="http://localhost:8080/vue-demo/showFalseOrderForm.html" >未付款订单</a></el-menu-item>
            <el-menu-item index="6-3"><a href="http://localhost:8080/vue-demo/showSuccessOrderForm.html" >已支付订单</a></el-menu-item>
        </el-submenu>
        <el-menu-item index="7" @click="signIn">每日签到</el-menu-item>
        <el-menu-item index="8" @click="dialogVisible11 = true">退出登录</el-menu-item>
    </el-menu>
    <!--添加数据的对话框表单-->
    <el-dialog
            title="退出登录"
            :visible.sync="dialogVisible11"
            width="30%">

        <el-form status-icon :rules="rules" ref="form" :model="user" label-width="80px">
            <el-form-item>
                <el-button type="primary" @click="cancelLogin">确认要退出登录吗</el-button>
                <el-button @click="dialogVisible11 = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!--按钮-->
    <el-row>
        <el-button type="primary" plain @click="dialogVisibleThree = true">批量支付</el-button>
    </el-row>
    <!--新增地址的对话框表单-->
    <el-dialog
            title="新增地址"
            :visible.sync="dialogVisible1"
            width="30%">
        <el-form status-icon :rules="rules" ref="form" :model="address" label-width="80px" >
            <el-form-item label="地址" prop="userAddress">
                <el-input v-model="address.userAddress" placeholder="请输入地址" :maxlength="12"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addAddress">立即创建</el-button>
                <el-button @click="dialogVisible1 = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
    <!--修改地址的对话框表单-->
    <el-dialog
            title="修改地址"
            :visible.sync="dialogVisibleFour1"
            width="30%">
        <el-form status-icon :rules="rules" ref="form" :model="address" label-width="80px" >
            <el-form-item label="地址" prop="userAddress">
                <el-input v-model="address.userAddress" placeholder="请输入地址" :maxlength="12"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="modifyAddress2(address.addressID)">立即修改</el-button>
                <el-button @click="dialogVisibleFour1 = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
    <!--删除地址的对话框表单-->
    <el-dialog
            title="删除地址"
            :visible.sync="dialogVisibleThree1"
            width="30%">

        <el-form status-icon :rules="rules" ref="form" :model="address" label-width="80px" >
            <el-form-item>
                <el-button type="primary" @click="deleteAddress2(address.addressID)">确认删除</el-button>
                <el-button @click="dialogVisibleThree1 = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!--管理地址的对话框表单-->
    <el-dialog
            title="管理地址"
            :visible.sync="dialogVisibleTwo"
            width="60%">

        <el-button type="danger" @click="dialogVisible1 = true">新增</el-button>
        <el-tag>默认地址</el-tag>
        <el-input v-model="morenAddress.userAddress" readonly>默认地址</el-input>
        <!--表格-->
        <template>
            <el-table
                    :data="AddressTableData"
                    style="width: 100%"

                    :row-class-name="tableRowClassName">
                <el-table-column
                        type="index"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="userAddress"
                        label="我的地址"
                        align="center">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="操作">
                    <template slot-scope="scope">
                        <!-- 在这里，你可以使用scope.$index来获取当前行的索引值 -->
                        <el-button type="primary" @click="updateAddress(scope.$index)">设置为本次的收货地址</el-button>
                        <el-button type="primary" @click="modifyMorenAddress(scope.$index)">设置为默认地址</el-button>
                        <el-button type="primary" @click="modifyAddress(scope.$index)">修改</el-button>
                        <el-button type="danger" @click="deleteAddress(scope.$index)">删除</el-button>
                    </template>
                </el-table-column>

            </el-table>
        </template>
    </el-dialog>
    <!--单个结算的对话框表单-->
    <el-dialog
            title="结算"
            :visible.sync="dialogVisibleTwo1"
            width="100%">


        <el-form status-icon :rules="rules" ref="form" :model="orderForm" label-width="80px" >
            <el-form-item label="订单失效时间" prop="date">
                <el-input v-model="orderForm.date" readonly></el-input>
            </el-form-item>
            <el-form-item label="商品名称" prop="goodsName">
                <el-input v-model="orderForm.goodsName" readonly></el-input>
            </el-form-item>
            <el-form-item label="商品信息" prop="goodsMessage">
                <el-input v-model="orderForm.goodsMessage" readonly></el-input>
            </el-form-item>
            <el-form-item label="商品单价" prop="price">
                <el-input v-model="orderForm.price" readonly></el-input>
            </el-form-item>
            <el-form-item label="购买的商品数" prop="goodsNum">
                <el-input v-model="orderForm.goodsNum" readonly></el-input>
            </el-form-item>
            <el-form-item label="要支付的总价格" prop="totalPrice">
            <el-input v-model="orderForm.totalPrice" readonly></el-input>
            </el-form-item>
            <el-form-item label="收货地址" prop="userAddress">
                <el-input v-model="orderForm.userAddress" readonly></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="userPhone">
                <el-input v-model="orderForm.userPhone" readonly></el-input>
            </el-form-item>
            <el-form-item label="订单状态" prop="statueOrderForm">
                <el-input v-model="orderForm.statueOrderForm" readonly></el-input>
            </el-form-item>
            <el-form-item>
                <template slot-scope="scope">
                    <!-- 在这里，你可以使用scope.$index来获取当前行的索引值 -->
                    <el-button type="primary" @click="payOneForm">付款</el-button>
                    <el-button @click="dialogVisibleTwo1 = false">取消</el-button>
                </template>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!--批量支付的对话框表单-->
    <el-dialog
            title="批量支付"
            :visible.sync="dialogVisibleThree"
            width="30%">

        <el-form status-icon :rules="rules" ref="form" :model="orderForm" label-width="80px" >
            <el-form-item>
                <el-button type="primary" @click="payOrderForm">批量支付</el-button>
                <el-button @click="dialogVisibleThree = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!--取消订单的对话框表单-->
    <el-dialog
            title="取消订单"
            :visible.sync="dialogVisibleFive1"
            width="30%">

        <el-form status-icon :rules="rules" ref="form" :model="orderForm" label-width="80px" >
            <el-form-item>
                <el-button type="primary" @click="deleteOrderForm(orderForm.orderID)">确认取消</el-button>
                <el-button @click="dialogVisibleFive1 = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!--表格-->
    <template>
        <el-table
                :data="orderFormTableData"
                style="width: 100%"
                @selection-change="handleSelectionChange"
                :row-class-name="tableRowClassName">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="订单失效时间"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="goodsName"
                    label="商品名称"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="goodsMessage"
                    align="center"
                    label="商品信息">
            </el-table-column>
            <el-table-column
                    prop="price"
                    align="center"
                    label="商品单价">
            </el-table-column>
            <el-table-column
                    prop="goodsNum"
                    align="center"
                    label="购买的商品数">
            </el-table-column>
            <el-table-column
                    prop="totalPrice"
                    align="center"
                    label="要支付的总价格">
            </el-table-column>
            <el-table-column
                    prop="userAddress"
                    align="center"
                    label="收货地址">
            </el-table-column>
            <el-table-column
                    prop="userPhone"
                    align="center"
                    label="手机号">
            </el-table-column>
            <el-table-column
                    prop="statueOrderForm"
                    align="center"
                    label="订单状态">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="操作">

                <template slot-scope="scope">
                    <!-- 在这里，你可以使用scope.$index来获取当前行的索引值 -->
                    <el-button type="warning" @click="modifyOrderForm(scope.$index)">修改地址</el-button>
                    <el-button type="primary" @click="payOrder2(scope.$index)">取消订单</el-button>
                    <el-button type="danger" @click="payOrder(scope.$index)">结算订单</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
</div>


<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el:"#app",

        mounted(){
            //当页面加载完成之后，发布异步请求获取数据

            var _this = this;
            axios({
                method:"get",
                url:"http://localhost:8080/vue-demo/showFalseOrderForm"
            }).then(function (resp) {
                _this.orderFormTableData = resp.data;

            })
            axios({
                method:"get",
                url:"http://localhost:8080/vue-demo/modifyAddress"
            }).then(function (resp) {
                _this.AddressTableData = resp.data;
            })

            axios({
                method:"get",
                url:"http://localhost:8080/vue-demo/modifyAddress2"
            }).then(function (resp) {
                _this.morenAddress = resp.data;
            })


        },
        methods: {

            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },//复选框选中后执行的方法
            handleSelectionChange(val) {
                this.multipleSelection = val;

                console.log(this.multipleSelection);
            },
            signIn(){
                //this.goods = this.tableData[index];
                var _this = this;
                //发送请求
                axios({
                    method : "post",
                    url:"http://localhost:8080/vue-demo/signIn",
                }).then(function (resp) {
                    if (resp.data === "success") {
                        alert("今日签到成功，已为您增加2积分")
                    }
                    else if(resp.data === "error"){
                        alert("今日已签到")
                    }
                })
            },
            modifyOrderForm(index){
                this.orderForm.userAddress = this.orderFormTableData[index].userAddress;
                this.orderForm.orderID = this.orderFormTableData[index].orderID;
                this.dialogVisibleTwo =  true;
            },
            modifyAddress2(addressID) {
                //console.log(addressID);
                var _this = this;
                //发送请求
                axios({
                    method : "post",
                    url:"http://localhost:8080/vue-demo/modifyAddress3",
                    data:_this.address
                }).then(function (resp) {

                    if (resp.data === "success") {
                        alert("修改地址成功")
                        _this.dialogVisibleFour1 =  false
                    }
                })
            },
            modifyAddress(index) {
                //console.log(index);
                //console.log(this.tableData[index].goodsID);
                this.address.addressID = this.AddressTableData[index].addressID;
                this.address.userAddress = this.AddressTableData[index].userAddress;
                this.dialogVisibleFour1=  true;
            },
            modifyMorenAddress(index) {
                //console.log(index);
                //console.log(this.tableData[index].goodsID);
                this.address.addressID = this.AddressTableData[index].addressID;
                this.address.userAddress = this.AddressTableData[index].userAddress;
                var _this = this;
                //发送请求
                axios({
                    method : "post",
                    url:"http://localhost:8080/vue-demo/modifyAddress4",
                    data:_this.address
                }).then(function (resp) {

                    if (resp.data === "success") {
                        alert("设置默认地址成功")
                    }
                })
            },
            updateAddress(index) {

                this.orderForm.userAddress = this.AddressTableData[index].userAddress;
                var _this = this;
                //发送请求
                axios({
                    method : "post",
                    url:"http://localhost:8080/vue-demo/modifyOrderForm",
                    data:_this.orderForm
                }).then(function (resp) {

                    if (resp.data === "success") {
                        alert("修改订单地址成功")
                    }
                })
            },
            addAddress() {
                //console.log(this.AddressTableData);
                var _this = this;
                //发送请求
                axios({
                    method : "post",
                    url:"http://localhost:8080/vue-demo/addAddress",
                    data:_this.address
                }).then(function (resp) {

                    if (resp.data === "success") {
                        alert("新增地址成功")
                        _this.dialogVisible1 =  false
                    }
                })
            },
            deleteAddress2(addressID) {
                //console.log(addressID);
                var _this = this;
                //发送请求
                axios({
                    method : "post",
                    url:"http://localhost:8080/vue-demo/deleteAddress",
                    data:addressID
                }).then(function (resp) {

                    if (resp.data === "success") {
                        alert("删除地址成功")
                        _this.dialogVisibleThree1 =  false
                    }
                })
            },
            deleteAddress(index) {
                //console.log(index);
                //console.log(this.AddressTableData[index].addressID);
                this.address.addressID = this.AddressTableData[index].addressID;
                this.address.userAddress = this.AddressTableData[index].userAddress;
                this.dialogVisibleThree1 =  true;
            },
            payOrder(index) {
                //console.log(index);
                //console.log(this.tableData[index].goodsID);
                this.orderForm.goodsID = this.orderFormTableData[index].goodsID;
                this.orderForm.goodsNum = this.orderFormTableData[index].goodsNum;
                this.orderForm.goodsName = this.orderFormTableData[index].goodsName;
                this.orderForm.goodsMessage = this.orderFormTableData[index].goodsMessage;
                this.orderForm.userAddress = this.orderFormTableData[index].userAddress;
                this.orderForm.price = this.orderFormTableData[index].price;
                this.orderForm.date = this.orderFormTableData[index].date;
                this.orderForm.time = this.orderFormTableData[index].time;
                this.orderForm.totalPrice = this.orderFormTableData[index].totalPrice;
                this.orderForm.statueOrderForm = this.orderFormTableData[index].statueOrderForm;
                this.orderForm.userPhone = this.orderFormTableData[index].userPhone;
                this.orderForm.orderID = this.orderFormTableData[index].orderID;
                this.orderForm.userID = this.orderFormTableData[index].userID;
                this.dialogVisibleTwo1 =  true;
            },
            payOrder2(index) {
                //console.log(index);
                //console.log(this.tableData[index].goodsID);
                this.orderForm.goodsID = this.orderFormTableData[index].goodsID;
                this.orderForm.goodsNum = this.orderFormTableData[index].goodsNum;
                this.orderForm.goodsName = this.orderFormTableData[index].goodsName;
                this.orderForm.goodsMessage = this.orderFormTableData[index].goodsMessage;
                this.orderForm.userAddress = this.orderFormTableData[index].userAddress;
                this.orderForm.price = this.orderFormTableData[index].price;
                this.orderForm.date = this.orderFormTableData[index].date;
                this.orderForm.time = this.orderFormTableData[index].time;
                this.orderForm.totalPrice = this.orderFormTableData[index].totalPrice;
                this.orderForm.statueOrderForm = this.orderFormTableData[index].statueOrderForm;
                this.orderForm.userPhone = this.orderFormTableData[index].userPhone;
                this.orderForm.orderID = this.orderFormTableData[index].orderID;
                this.orderForm.userID = this.orderFormTableData[index].userID;
                this.dialogVisibleFive1 =  true;
            },
            payOrderForm(){
                //console.log(this.multipleSelection);
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    let selectionElement =  this.multipleSelection[i];
                    this.selectedIds[i] = selectionElement.orderID;
                }
                var _this = this;
                //发送请求
                axios({
                    method : "post",
                    url:"http://localhost:8080/vue-demo/payOrderForm",
                    data:_this.selectedIds
                }).then(function (resp) {

                    if (resp.data === "success") {
                        alert("成功支付")
                        _this.dialogVisibleThree =  false
                    }
                    else if (resp.data === "error2") {
                        alert("钱不够")
                        _this.dialogVisibleThree =  false
                    }
                    else if (resp.data === "error3") {
                        alert("存在已经过期的订单")
                        _this.dialogVisibleThree =  false
                    }
                })
            },
            payOneForm(){
                //console.log(this.multipleSelection);
                var _this = this;
                //发送请求
                axios({
                    method : "post",
                    url:"http://localhost:8080/vue-demo/payOneForm",
                    data:_this.orderForm
                }).then(function (resp) {

                    if (resp.data === "success") {
                        alert("成功支付")
                        _this.dialogVisibleTwo1 =  false
                    }
                    else if (resp.data === "error2") {
                        alert("钱不够")
                        _this.dialogVisibleTwo1 =  false
                    }
                    else if (resp.data === "error3") {
                        alert("已经过期的订单")
                        _this.dialogVisibleTwo1 =  false
                    }
                })
            },
            cancelLogin(){
                //this.goods = this.tableData[index];
                var _this = this;
                //发送请求
                axios({
                    method : "post",
                    url:"http://localhost:8080/vue-demo/cancelLogin",
                }).then(function (resp) {
                    if (resp.data === "success") {
                        alert("您已经退出登录")
                        window.location.href = "http://localhost:8080/vue-demo/hello.html";
                    }
                })
            },
            deleteOrderForm(orderID){
                console.log(orderID);
                var _this = this;
                //发送请求
                axios({
                    method : "post",
                    url:"http://localhost:8080/vue-demo/deleteOrderForm",
                    data:orderID
                }).then(function (resp) {

                    if (resp.data === "success") {
                        alert("成功取消订单")
                        _this.dialogVisibleFive1 =  false
                    }
                })
            },
        },
        data() {


            return{

                orderForm: {
                    date:'',
                    userID:'',
                    price:'',
                    totalPrice:'',
                    goodsID:'',
                    goodsName:'',
                    goodsMessage:'',
                    goodsNum:'',
                    statueOrderForm:'',
                    userAddress:'',
                    userPhone:'',
                    orderID:'',
                    time:'',
                },
                orderFormTableData: [{
                    date:'',
                    userID:'',
                    price:'',
                    totalPrice:'',
                    goodsID:'',
                    goodsName:'',
                    goodsMessage:'',
                    goodsNum:'',
                    statueOrderForm:'',
                    userAddress:'',
                    userPhone:'',
                    orderID:'',
                    time:'',
                }],
                user:{},
                AddressTableData: [{
                    userAddress: '',
                    userID: '',
                    addressID: '',
                }],
                morenAddress:{
                    userAddress: '',
                    userID: '',
                    addressID: ''
                },
                address: {
                    userAddress: '',
                    userID: '',
                    addressID: ''
                },
                rules: {

                },
                activeIndex2: '1',
                currentPage: 4,
                //被选中的id数组
                selectedIds:[],

                //复选框选中数据
                multipleSelection: [],
                dialogVisible1: false,
                dialogVisible: false,
                dialogVisibleTwo: false,
                dialogVisibleTwo1: false,
                dialogVisibleThree: false,
                dialogVisibleThree1: false,
                dialogVisibleFour1: false,
                dialogVisibleFive1: false,
                dialogVisible11: false,
            }
        }
    })
</script>

</body>
</html>